<template>
  <div>
    <div>{{ num }}</div>
    <button @click="num++">Parent>num+</button>
    <Child></Child>
  </div>
</template>

<script lang='ts' setup>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
import Child from './Child.vue';
let num=ref(0)
onBeforeMount(()=>{
    console.log("=======Parent>onBeforeMount==========")
})
onMounted(()=>{
    console.log("=======Parent>onMounted==========")
   
})
onBeforeUpdate(()=>{
    console.log("=======Parent>onBeforeUpdate==========")
})
onUpdated(()=>{
    console.log("=======Parent>onUpdated==========")
})
onBeforeUnmount(()=>{
    console.log("=======Parent>onBeforeUnmountnUpdated======")
})
onUnmounted(()=>{
    console.group("=======Parent>onUnmounted======")
})
</script>

<style lang='scss' scoped>
</style>